<template>
  <div class="header">
        <div class="top">
            <router-link to="/home">CHANEL</router-link>
        </div>
        <div class="nav">
            <router-link to="/show">Show</router-link>
            <router-link to="/cloth">高级定制服</router-link>
            <router-link to="/best">精品</router-link>
            <router-link to="/news">News</router-link>
        </div>
  </div>
</template>
<script>
export default {
};
</script>
<style scoped>
.header .top{
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-style: oblique;
}
.header .nav{
    width: 50%;
    justify-content:space-around;
    margin: 1em auto;
    display: flex;
}
.header .nav a:hover{
    text-decoration-line:underline;
}
</style>